<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  isOpen: {
    type: Boolean,
    default: false
  },
  currentChat: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['close'])

const tabs = [
  { id: 'project', label: 'Project' },
  { id: 'fileManager', label: 'File Manager' },
  { id: 'groupDetails', label: 'Group Details' }
]

const projects = [
  {
    title: 'Polarised stable frame',
    lastEditor: 'Caden Brakus',
    editDate: 'Saturday, 12 September, 2020',
    tasksCompleted: '36/94',
    dueDate: '20 Sep, Fri, 2020'
  },
  {
    title: 'Synergized upward-trending info-mediaries',
    lastEditor: 'Keely West',
    editDate: 'Saturday, 12 September, 2020',
    tasksCompleted: '36/94',
    dueDate: '13 Sep, Fri, 2020'
  }
]
</script>

<template>
  <div class="drawer-overlay" v-if="isOpen" @click="emit('close')">
    <div class="drawer" @click.stop>
      <div class="drawer-header">
        <h2>Group Activity</h2>
        <div class="participants">4 Participants</div>
        <button class="close-btn" @click="emit('close')">
          <i class="fas fa-times"></i>
        </button>
      </div>

      <div class="drawer-tabs">
        <button 
          v-for="tab in tabs" 
          :key="tab.id"
          class="tab-btn"
          :class="{ active: tab.id === 'project' }"
        >
          {{ tab.label }}
        </button>
      </div>

      <div class="drawer-content">
        <div class="projects">
          <div v-for="(project, index) in projects" 
               :key="index"
               class="project-card">
            <div class="project-header">
              <h3>{{ project.title }}</h3>
              <button class="settings-btn">
                <i class="fas fa-cog"></i>
              </button>
            </div>
            
            <div class="project-info">
              <div class="info-item">
                <span class="label">Last Edited by:</span>
                <span class="value">{{ project.lastEditor }}</span>
              </div>
              <div class="info-item">
                <span class="label">{{ project.editDate }}</span>
              </div>
            </div>
            
            <div class="progress-bar">
              <div class="progress" style="width: 38%;"></div>
            </div>
            
            <div class="project-footer">
              <div class="tasks">
                Tasks Completed: {{ project.tasksCompleted }}
              </div>
              <div class="due-date">
                <i class="far fa-calendar"></i>
                {{ project.dueDate }}
              </div>
            </div>
          </div>
        </div>

        <button class="create-project-btn">
          Create New Project
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.drawer-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
}

.drawer {
  width: 380px;
  height: 100%;
  background-color: #fff;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.drawer-header {
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
  position: relative;
}

.drawer-header h2 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.participants {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  padding: 4px;
}

.drawer-tabs {
  display: flex;
  padding: 0 20px;
  border-bottom: 1px solid #e0e0e0;
}

.tab-btn {
  padding: 12px 16px;
  border: none;
  background: none;
  cursor: pointer;
  color: #666;
  font-size: 14px;
  position: relative;
}

.tab-btn.active {
  color: #2196f3;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #2196f3;
}

.drawer-content {
  padding: 20px;
  overflow-y: auto;
  height: calc(100% - 140px);
}

.project-card {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.project-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.settings-btn {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 4px;
}

.project-info {
  margin-bottom: 12px;
}

.info-item {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}

.progress-bar {
  height: 4px;
  background-color: #e0e0e0;
  border-radius: 2px;
  margin-bottom: 12px;
}

.progress {
  height: 100%;
  background-color: #2196f3;
  border-radius: 2px;
}

.project-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #666;
}

.tasks {
  color: #2196f3;
}

.due-date {
  display: flex;
  align-items: center;
  gap: 4px;
}

.create-project-btn {
  width: 100%;
  padding: 12px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.create-project-btn:hover {
  background-color: #43a047;
}
</style> 